<template>
	<view class="page">

		<image class="bg" src="../../../static/20231212173429.png"></image>
		<view class="name">
			<view class="orders">订单编号:{{lists.id}}</view>
			<view class="detail-name">{{lists.storeInfocopy.name}}</view>
			<view class="map">{{lists.storeInfocopy.address}}</view>
		</view>
		<view class="cot">
			<view class="namecode">订单明细</view>
			<view class="list" v-for="(item,index) in lists.workOrderList" :key="index">
				<image :src="item.productImg"></image>
				<view class="li">
					<view style="font-size: 28rpx ;">故障名称：{{item.name}}</view>
					<view>{{item.productDesc}}</view>
				</view>
				<view class="money">¥{{item.totalPrice}}</view>
			</view>
			<!-- -->
		<view  v-if="list.workOrderList.length>2">
			<view class="unfold" v-if="list.workOrderList.length==2" @click="unfold(1)">
				<view  >{{lists.workOrderList.length}}共项服务 点击展开</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view class="unfold" @click="unfold(2)" v-else>
				<view >{{list.workOrderList.length}}共项服务 点击收回</view>
				<u-icon name="arrow-up"></u-icon>
			</view>
		</view>
			
			<u-line margin="40rpx 0rpx"></u-line>
			<view class="orders">订单合计：<text>¥{{lists.totalPrice}}</text></view>
		</view>
		<view class="listin">
			<u-cell size="30" title="司机姓名" :value="lists.wxUser.nickName"></u-cell>
			<u-cell size="30" title="联系电话" :value="lists.wxUser.account"></u-cell>
			<u-cell size="30" title="车牌号" :value="lists.carNumber"></u-cell>
			<u-cell size="30" title="下单时间" :value="lists.createTime"></u-cell>
			<u-cell size="30" title="支付方式" :isLink="true" value="企业挂账"></u-cell>
			<!-- <u-cell size="30" title="司机签字">
				<view slot="right-icon" class="kan">查看</view>
			</u-cell> -->
		</view>
		<!-- <view class="listin" >
			<u-cell size="30" title="支付方式" :isLink="true" value="企业挂账"></u-cell> -->
			<!-- <u-cell size="30" title="优惠卷" value="内容" :isLink="true"></u-cell> -->
		<!-- </view> -->
		<view style="margin-top: 20rpx; visibility: hidden;">222</view>
		<u-loading-page loading-text="加载中" :loading="loading"></u-loading-page>
	</view>
</template>

<script>
	import {
		getOrderDetailById
	} from '@/api/orders.js'
	export default {
		data() {
			return {
				lists: [],
				list: [],
				loading: true
			}
		},
		onLoad(i) {
			console.log(i)
			this.selectDetailByTime(i.id)
		},
		methods: {
			selectClick(e) {
				this.show = false
			},
			unfold(i) {
				if (i == 1) {
					console.log(this.list.workOrderList)
					this.lists.workOrderList = this.list.workOrderList
					this.$forceUpdate()
				}else{
					this.lists = this.list
					this.lists.workOrderList = this.lists.workOrderList.slice(0, 2)
				}
			},
			selectDetailByTime(id) {
				getOrderDetailById(id).then((res) => {
				
					this.list = JSON.parse(JSON.stringify(res.data))
					this.lists = JSON.parse(JSON.stringify(res.data))
					this.lists.workOrderList = this.lists.workOrderList.slice(0, 2)
					this.loading = false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {

		position: relative;
	}

	.bg {
		position: absolute;
		z-index: -1;
		width: 718rpx;
		height: 1026rpx;
		margin: 16rpx;
	}

	.name {
		line-height: 50rpx;
		z-index: 999;
		padding: 40rpx 0rpx 20rpx 50rpx;
		font-size: 32rpx;
		line-height: 60rpx;

		.orders {
			font-size: 28rpx;
			color: #2A2A29;
		}

		.detail-name {
			font-size: 34rpx
		}

		.map {
			font-size: 26rpx;
			color: #969696;
			width: 640rpx;
			line-height: 40rpx;
		}
	}

	.list {
		margin: 20rpx 0rpx;
		position: relative;
		display: flex;
		margin-left: 46rpx;

		image {
			width: 136rpx;
			height: 136rpx;
			margin-right: 20rpx;
		}

		.li {
			width: 450rpx;
			font-size: 24rpx;
		}

		.money {
			font-weight: 600;
			color: #FF0000;
			font-size: 28rpx;
			position: absolute;
			right: 60rpx;
			margin-top: 80rpx;
		}
	}

	.cot {
		margin: 24rpx 29rpx 24rpx 23rpx;
		border-radius: 10rpx;
		background-color: #ffffff;

		.namecode {
			margin-top: 80rpx;
			margin-left: 46rpx;
			font-size: 34rpx;
			font-weight: 600;
		}

		.artificial {
			font-size: 28rpx;
			margin-top: 20rpx;
			margin-left: 46rpx;
			margin-right: 60rpx;

			@include flex(row, space-between, center) view>text {
				margin-left: 20rpx;
			}

			.artificial-money {
				font-weight: 600;
				color: #FF0000;
				font-size: 28rpx;

			}
		}

		.unfold {
			display: flex;
			margin: 40rpx 20rpx;
			padding: 20rpx 50rpx 20rpx 200rpx;
			font-size: 28rpx;
			font-weight: 600;
			background-color: #F5F5F5;
		}

		.orders {
			display: flex;
			margin-top: -20rpx;
			margin-right: 20rpx;
			font-size: 28rpx;
			font-weight: 600;
			justify-content: flex-end;

			text {
				color: #FF0000;
				font-size: 32rpx;
			}
		}
	}

	.kan {
		color: #1677FF;
		font-size: 28rpx;
		font-weight: 500;
	}

	.listin {
		background-color: #ffffff;
		margin: 60rpx 29rpx 0rpx 23rpx;
		border-radius: 10rpx;
	}
</style>